<template>
 <div class="home">
  
    <!--头部导航栏 -->
   <div class="nav-bar">
   <van-nav-bar
         title="个人用户中心"
         left-text="返回"
         left-arrow
         @click-left="onClickLeft"
         fixed
        /> 
    </div>

  
     <!-- 头像部分 -->
    
    <div class="header-log">
        <van-uploader v-model="fileList" multiple :max-count="1" >
         <template #preview-cover="{ file }">
           <div class="preview-cover van-ellipsis">{{ file.name }}</div>
       </template>
     </van-uploader>      
    </div>


    <!-- 编辑个人信息 -->
     <div class="user">
        <van-address-edit
          :area-list="areaList"
          show-delete
          show-search-result
          show-area
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          :show-detail = false
          :address-info ="AddressInfo"
       
       />


     </div>



  <router-view /> 

  
    </div>
  </template>
  
  <script>
 
 import { Toast } from 'vant';
 import { areaList } from '@vant/area-data';



  export default {
    
    
     data(){
       return {
          homeDate:[],
          fileList:[],
          areaList,
         searchResult: [],
         AddressInfo: {
           name: '编辑',
           tel: '编辑'
         }
      
        
       }
     },
  
      created() {
    
      },
     
      methods: {
        onClickLeft() {
            this.$router.go(-1)
           
        },

        onSave() {
          Toast('保存成功');
         },
         onDelete() {
            Toast('删除成功');
        },
          
       
      },


    components: {
      
    }
  }
  </script>
  
  <style lang="scss" scoped>
         .home {
           position: relative;
            width: 100vw;
            height:200px;
            background: #eee;
            margin-top: 50px;
            z-index: 1;
            border: 1px solid transparent;
           
            .header-log {
                width: 120px;
                height: 120px;
                line-height: 100px;
                text-align: center;
                margin: 40px auto;
                border: 1px solid rgb(156, 154, 154);
                padding: 17px;
                border-radius: 999px;
                overflow: hidden;

               

                    .preview-cover {
                        position: absolute;
                        bottom: 0;
                        box-sizing: border-box;
                        width: 100%;
                        padding: 4px;
                        color: transparent;
                        font-size: 12px;
                        text-align: center;
                         margin-top: 100px;
                      }
                
            }
          
  
         }
  </style>
    